<template>
	<z-paging ref="paging" v-model="dataList" @query="getDataList" :safe-area-inset-bottom="true" bg-color="#F2F3FA">
		<view class="main">
			<view class="content">
				<view class="content-box" :style="customStyle">
					<s-block-item v-if="dataList.length>0" type="ProductList" :productList="dataList"
						:data="template.property" :styles="template.property.style"></s-block-item>
				</view>
			</view>
		</view>
	</z-paging>

</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import SpuApi from '@/sheep/api/product/spu.js'
	import sheep from '@/sheep';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const dataList = ref([])
	const List = ref([])
	const index = ref(0)
	const paging = ref(null)
	const pageInfo = reactive({
		pageNo: 1,
		pageSize: 10,
		partitionType: 2,
		classificationId:"0"
	})
	const getDataList = async (pageNo, pageSize) => {
		pageInfo.pageNo = pageNo ? pageNo : pageInfo.pageNo
		pageInfo.pageSize = pageSize ? pageSize : pageInfo.pageSize
		console.log('pageInfo', pageInfo);
		// 获得商品 SPU 分页
		let res = await SpuApi.getSpuPage(pageInfo)
		console.log('获得商品 SPU 分页', res)
		// setTimeout(() => {
		if (res.code == 0) {
			// List.value.push(...res.data.list)
			paging.value.complete(res.data.list);
			console.log(' dataList', dataList.value);
		} else {
			paging.value.complete(false);
		}
		// paging.value.complete(10);
		// }, 1000);
	}
	const appstore = uni.getStorageSync('app-store')
	// console.log('appstore', appstore);
	// let template = JSON.parse(appstore).template.home.components.find(item => item.id == 'ProductList')
	// let SearchBarTemplate = JSON.parse(appstore).template.home.components.find(item => item.id == 'SearchBar')
	
	let template = {
		"property": {
			"layoutType": "threeCol",
			"fields": {
				"name": {
					"show": true,
					"color": "#000"
				},
				"price": {
					"show": true,
					"color": "#ff3000"
				}
			},
			"badge": {
				"show": false,
				"imgUrl": ""
			},
			"borderRadiusTop": 8,
			"borderRadiusBottom": 8,
			"space": 8,
			"spuIds": [
				641,
				642
			],
			"style": {
				"bgType": "color",
				"bgColor": "",
				"marginLeft": 8,
				"marginRight": 8,
				"marginBottom": 8,
				"padding":"0 35rpx"
			}
		}
	}
	let SearchBarTemplate = {
	
		"property": {
			"height": 28,
			"showScan": false,
			"borderRadius": 10,
			"placeholder": "搜索商品",
			"placeholderPosition": "left",
			"backgroundColor": "rgb(238, 238, 238)",
			"textColor": "rgb(150, 151, 153)",
			"hotKeywords": [
				""
			],
			"style": {
				"bgType": "color",
				"bgColor": "#fff",
				"marginBottom": 8,
				"paddingTop": 8,
				"paddingRight": 8,
				"paddingBottom": 8,
				"paddingLeft": 8
			}
		}
	}
	console.log('template', template);
	// const template = sheep.$store('app').template?.home.components.find(item => item.id == 'ProductList');
	// console.log(' goodCardTemplate', goodCardTemplate);
	const customStyle = ref('')
	const getElementStyle = () => {
		const systemInfo = uni.getSystemInfoSync()
	
		let windowWidth = systemInfo.windowWidth
	
		let styleObj = {
			width: windowWidth - 2 * 10 + 'px',
	
		}
		customStyle.value = styleObj
	}
	onShow(() => {
		getElementStyle()
	})
	onLoad((e) => {
		pageInfo.classificationId=e.index
	})
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		width: 100vw;
		padding-top:25rpx;
		background: linear-gradient(180deg, #54C5C1 18%, rgba(255, 255, 255, 0) 80%);
		// background-image: url("/static/images/me-bj.png");
		// background-position: center;
		// background-size: cover;
	}

	.search {
		border-radius: 40rpx;
		opacity: 0.9;
		display: flex;
		align-items: center;
		padding: 18rpx 28rpx;
		background: #FFFFFF;
		margin-top: 50rpx;
	}

	.top {
		display: flex;
		justify-content: center;
		height: 20%;
		background: #3F72EB;

		.title {
			color: #fff;
			font-size: 18px;
			font-weight: 550;
			margin: 20px 0px 10px 5px;
			padding: 5px;
		}
	}

	.content {
		display: flex;
		justify-content: center;
		// border-radius: 30px 30px 0 0;
		// background: #F2F3FA;

		.content-box {
			padding: 10px
		}
	}

	.cate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 30rpx;
	}

	.cate-I {
		font-size: 26rpx;
		text-align: center;

		image {
			height: 100rpx;
			width: 120rpx;
			margin-bottom: 25rpx;
		}
	}
</style>